<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>我的成绩</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/score/tes' }">考试</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/score/tcontent/' + testid }">{{testname}}</el-breadcrumb-item>
      <el-breadcrumb-item>题目{{hid}}</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <!-- 作业列表 -->
      <!-- border加边框 -->
      <!-- stripe隔行变色 -->

      <el-table :data="homeworklist" style="width: 100%">
        <el-table-column label="答题ID" prop="id"></el-table-column>
        <el-table-column label="出题者" prop="author"></el-table-column>
        <el-table-column label="答题时间" prop="time"></el-table-column>
        <el-table-column label="得分" prop="score" align="center"></el-table-column>
      </el-table>

      <el-row>
        <el-col :span="12">
          <el-form :model="form" label-width="80px">
            <el-form-item label="标准答案">
              <el-input
                type="textarea"
                v-model="form.standard_ans"
                :autosize="{ minRows: 4, maxRows: 4 }"
              ></el-input>
            </el-form-item>
            <el-form-item label="用户回答">
              <el-input
                type="textarea"
                v-model="form.user_ans"
                :autosize="{ minRows: 4, maxRows: 4 }"
              ></el-input>
            </el-form-item>
          </el-form>

          <el-table :data="keysData" style="width: 100%" :row-class-name="highlight">
            <el-table-column prop="key" label="关键词" align="center"></el-table-column>
            <el-table-column prop="score" label="得分" align="center"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="11" :offset="1">
          <div v-for="(item,index) in info" :key="index" class="des">
            <i :class="'iconfont icon-'+ item.pic"></i>
            <span>{{item.title}}</span>
            <span class="num">{{item.num}}</span>
            <el-progress type="circle" :percentage="Number(per)" v-if="index == 0"></el-progress>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import qs from 'qs'
export default {
  data() {
    return {
      homeworklist: [
        {
          id: '',
          author: '',
          time: '',
          score: null
        }
      ],
      questionId: 1,
      keyWords: [],
      keyScore: [],
      userKeyScore: [],

      testname: this.$store.state.homeortestName,
      testid: this.$store.state.homeortestId,

      keysData: [
        // {
        //   key: '关键词1',
        //   score: 2
        // },
        // {
        //   key: '关键词2',
        //   score: 2
        // },
        // {
        //   key: '关键词3',
        //   score: 2
        // }
      ],
      info: [
        {
          pic: 'yuanbingtutubiao',
          title: 'Prob',
          num: ''
        },
        {
          pic: 'jiazaizhong',
          title: 'Time',
          num: ''
        },
        {
          pic: 'shuju',
          title: 'RAM',
          num: ''
        },
        {
          pic: 'CPU1',
          title: 'Cpu',
          num: ''
        }
      ],
      form: {
        standard_ans: '',
        user_ans: ''
      },
      hid: this.$route.params.id,
      uid: this.$store.state.userId,
      tid: 0,

      num: []
    }
  },
  created() {
    this.getDetail()
    this.getParam()  //这里存在bug，要上一步执行以后再执行这个
  },
  methods: {
    // 获取所有的菜单，从后端
    async getDetail() {
      // 取出的data重命名为res
      console.log(this.$route.params.id)

      // post请求出错
      const { data: res } = await this.$http.get(
        `user/answer/getAnswer?questionId=${this.hid}&userId=${this.uid}`
      )
      if (res.code !== 200) return this.$message.error('失败！')

      this.tid = res.data.id
      this.homeworklist[0].id = res.data.id
      this.homeworklist[0].author = res.data.teacherName
      this.homeworklist[0].time = /\d{4}-\d{1,2}-\d{1,2}/g.exec(
        res.data.answerTime
      )[0]
      this.homeworklist[0].score = res.data.score

      console.log(this.homeworklist)

      // keysData
      // this.keyWords = res.data.keyWords.split(',')
      // this.keyScore = res.data.keyScore.split(',')
      // this.toKeyData(this.keyWords, this.keyScore)
      // this.userKeyScore = res.data.userKeyScore.split(',')

      // this.num = res.data.userKeySimilarity.split(',')
      // console.log(this.num)
      // var sum = 0
      // for (var p of this.num) {
      //   sum += parseFloat(p)
      // }

      // console.log(sum)

      // info
      // this.info[0].num = parseFloat(sum/this.num.length).toFixed(1)
      // this.info[1].num = parseFloat(res.data.runTime).toFixed(1) + 'ms'
      // this.info[2].num = parseFloat(res.data.memoryCost).toFixed(1) + 'MB'

      // form
      this.form.standard_ans = res.data.formatAnswer
      this.form.user_ans = res.data.myAnswer
    },

    // 获取
    async getParam() {
      console.log(this.tid)
      const { data: res } = await this.$http.post(
        'user/answer/getAnswerParam/' + this.tid
      )
      if (res.code !== 200) return this.$message.error('获取失败')

      this.keyWords = res.data.queKeyWords
      this.keyScore = res.data.queKeyScore

      this.userKeyScore = res.data.userKeyScore
      this.userKeyWords = res.data.userKeyWords
      this.userKeySimilarity = res.data.userKeySimilarity
      this.toKeyData(this.keyWords, this.keyScore)

      // this.toData(this.keyWords)

      // this.option.series[0].data[0].value = this.userKeySimilarity

      // this.info[0].num = parseFloat(sum/this.num.length).toFixed(1)  // *100取决于相似度的取值
      this.per = res.data.prob
      this.info[0].num = res.data.prob
      this.info[1].num = parseFloat(res.data.runTime).toFixed(1) + 'ms'
      // this.info[2].num = parseFloat(this.list.memoryCost).toFixed(1) + 'MB'
      this.info[2].num = res.data.ram
      this.info[3].num = res.data.cpu

      this.rightwords = res.data.rightAnswerYlz
      this.userwords = res.data.userAnswerYlz

      console.log(this.info)
    },

    toData(arr) {
      for (var i = 0; i < arr.length; i++) {
        this.indi.push({
          max: 100,
          name: arr[i]
        })
      }
      this.option.radar.indicator = this.indi
    },

    toKeyData(arr1, arr2) {
      for (var i = 0; i < arr1.length; i++) {
        this.keysData.push({
          key: arr1[i],
          score: parseInt(arr2[i])
        })
      }
    },

    // 高亮未答对地方
    highlight({ row, rowIndex }) {
      if (row.score > this.userKeyScore[rowIndex]) {
        return 'high-row'
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .high-row {
  background-image: linear-gradient(
    to top,
    #fdcbf1 0%,
    #fdcbf1 1%,
    #e6dee9 100%
  ) !important;
  color: red;
}

.el-table {
  margin-bottom: 30px;
}

.des {
  height: 100px;
  margin-top: 30px;
  span {
    display: inline-block;
    width: 150px;
    font-size: 25px;
  }
  .num {
    font-weight: 1000;
    font-size: 30px;
  }
  .iconfont {
    font-size: 30px;
  }

  .el-progress {
    vertical-align: -14px;
    margin-left: -25px;
  }

  /deep/ .el-progress-circle {
    width: 50px !important;
    height: 50px !important;
  }
}

.el-menu {
  .el-menu-item {
    text-align: center;
  }
  .el-menu-item.is-active {
    background: #1aad19 !important;
  }
}

.sty {
  // font-weight: bold;
  font-size: 20px;
}

.home-container {
  //   height: 100%;
  width: 80%;
  margin-left: 10%;
  background: #f0f0f2;
}

.el-container {
  margin-top: 15px;
}

.el-header {
  background-color: white;
  // margin-left: 10%;
  // width: 80%;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: black;
  font-size: 20px;
  .left {
    display: flex;
    align-items: center;
    margin-left: 10px;
    img {
      width: 5%;
      height: 5%;
    }
    span {
      margin-left: 15px;
    }
  }
  .right {
    display: flex;
    align-items: center;
    .el-dropdown {
      span {
        font-size: 15px;
        white-space: nowrap;
      }
    }
  }
}

.el-button {
  margin-left: 50px;
  font-size: 15px;
  // background: white;
  border: none;
}
.el-avatar {
  margin-right: 50px;
}

.el-main {
  background-color: white;
  margin-left: 15px;
  margin-right: 15px;

  // background-image: url("../assets/微信图片_20191012142541.jpg");
  // background-size: 1336px 694.4px;
}

.iconfont {
  margin-right: 30px;
}
</style>